



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/blog/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/atom.xml" />
<link rel="alternate" type="application/json" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/blog/css/app.css?v=0.2.5">

  
  <meta name="keywords" content="少时诵诗书" />


<link rel="canonical" href="https://song-ruipeng.gitee.io/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/">



  <title>
计算机网络基础总结 - 我的日志 |
Yume Shoka = 宋胖子</title>
<meta name="generator" content="Hexo 6.3.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">计算机网络基础总结
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2023-04-18 14:47:21">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2023-04-18T14:47:21+08:00">2023-04-18</time>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/blog/" rel="start">Yume Shoka</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
        <ul>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipeyhsblkj20zk0m81kx.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipey0a334j20zk0m8qpt.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclhnx9glj20zk0m8npd.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclip4jbpj20zk0m87cv.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gicliierfjj20zk0m8npd.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipew28b65j20zk0m8hdt.jpg"></li>
        </ul>
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/blog/">首页</a></span><i class="ic i-angle-right"></i>
<span  class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="item" rel="index" title="分类于 我的日志"><span itemprop="name">我的日志</span></a>
<meta itemprop="position" content="1" /></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="https://song-ruipeng.gitee.io/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/blog/images/avatar.jpg">
    <meta itemprop="name" content="宋胖子">
    <meta itemprop="description" content=", 欢迎大家一起交流">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="宋胖子">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <h3 id="一http"><a class="markdownIt-Anchor" href="#一http">#</a> 一.HTTP</h3>
<h4 id="1浏览器安全"><a class="markdownIt-Anchor" href="#1浏览器安全">#</a> 1. 浏览器安全</h4>
<h5 id="11什么是xss攻击"><a class="markdownIt-Anchor" href="#11什么是xss攻击">#</a> 1.1 什么是 XSS 攻击？</h5>
<h6 id="答"><a class="markdownIt-Anchor" href="#答">#</a> 答:</h6>
<pre><code>(1)XSS攻击是指跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意代码，使之在用户浏览器中运行，盗取用户的信息如Cookie等。
(2)本质:XSS攻击的本质就是因为网站无法对恶意代码进行过滤，与正常代码混合在一起了，浏览器无法分辨哪些脚本是可信的，从而导致恶意代码运行。
</code></pre>
<hr>
<h6 id="解决方法"><a class="markdownIt-Anchor" href="#解决方法">#</a> 解决方法:</h6>
<pre><code> (1)不使用服务器端渲染
 (2)对需要插入到HTML中的代码做好充分转义
 (3)使用csp
</code></pre>
<h5 id="12什么是csrf攻击"><a class="markdownIt-Anchor" href="#12什么是csrf攻击">#</a> 1.2 什么是 CSRF 攻击？</h5>
<h6 id="答-2"><a class="markdownIt-Anchor" href="#答-2">#</a> 答:</h6>
<pre><code>(1)CSRF是跨站伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求，如果用户在被攻击网站中保存了登录状态。那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。
</code></pre>
<h2 id="img"><a class="markdownIt-Anchor" href="#img">#</a> <img data-src="https://pic1.zhimg.com/v2-391dc31d3467897f503367625b163c74_r.jpg" alt="img"></h2>
<h6 id="解决方法-2"><a class="markdownIt-Anchor" href="#解决方法-2">#</a> 解决方法:</h6>
<pre><code> (1)进行同源检测：检查 HTTP Referer 字段(浏览器中的看来源)
 (2)cookie双重验证
 (3)用Token代替cookie
</code></pre>
<h4 id="2进程与线程略"><a class="markdownIt-Anchor" href="#2进程与线程略">#</a> 2. 进程与线程 (略)</h4>
<h4 id="3浏览器缓存"><a class="markdownIt-Anchor" href="#3浏览器缓存">#</a> 3. 浏览器缓存</h4>
<h5 id="31浏览器的缓存机制"><a class="markdownIt-Anchor" href="#31浏览器的缓存机制">#</a> 3.1 浏览器的缓存机制？</h5>
<p><img data-src="https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/761678710265_.pic.jpg" alt="img"></p>
<h6 id="注"><a class="markdownIt-Anchor" href="#注">#</a> 注:</h6>
<p>(1) 强缓存：如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。<br>
(2) 强缓存策略:http 头信息中的<strong> Expire</strong> 和<strong> Cache-Control</strong><br>
 (3) 协商缓存：如果命中强制缓存，我们无需发起新的请求，直接使用缓存内容，如果没有命中强制缓存，如果设置了协商缓存会先向服务器发一个请求，如果没有发生修改，返回<strong> 304</strong> 使用本地缓存副本。如果发生了修改，返回修改后的资源，code 返回<strong> 200</strong><br>
 (4) 协商缓存策略:http 头信息中的<strong> Etag</strong> 和<strong> Last-Modifed</strong></p>
<h4 id="4浏览器组成"><a class="markdownIt-Anchor" href="#4浏览器组成">#</a> 4. 浏览器组成</h4>
<h4 id="5浏览器渲染原理"><a class="markdownIt-Anchor" href="#5浏览器渲染原理">#</a> 5. 浏览器渲染原理</h4>
<h5 id="51浏览器的渲染过程"><a class="markdownIt-Anchor" href="#51浏览器的渲染过程">#</a> 5.1 浏览器的渲染过程？</h5>
<p><img data-src="https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/20200808204032355.png" alt="image"></p>
<h5 id="52浏览器渲染优化"><a class="markdownIt-Anchor" href="#52浏览器渲染优化">#</a> 5.2 浏览器渲染优化</h5>
<h6 id="1针对jsjs既会阻塞html解析也会阻塞css的解析-因此我们可以对js的加载方式进行改变来进行优化"><a class="markdownIt-Anchor" href="#1针对jsjs既会阻塞html解析也会阻塞css的解析-因此我们可以对js的加载方式进行改变来进行优化">#</a> （1）针对 JS：JS 既会阻塞 HTML 解析，也会阻塞 CSS 的解析。因此我们可以对 JS 的加载方式进行改变，来进行优化:</h6>
<pre><code>   (1.1)尽量将js文件放在body的最后
   (1.2)body中间尽量不要写&lt;script&gt;标签
   (1.3)&lt;script&gt;标签的引入资源方式有三种，有一种就是我们常用的直接引入，还有两种就是使用async属性和defer属性来异步引入，两者都是去异步外部的js文件,不会阻塞DOM的解析(尽量使用异步加载)，三者的区别如下:
     .script:立即停止页面渲染去加载资源文件，当资源文件加载完毕后立即执行js代码，js代码执行完毕后继续渲染页面；
     .async是在下载完成之后，立即异步加载，加载好后立即执行，多个带async属性的标签，不能保证加载的顺序。
     .defer是在下载完成之后，立即异步加载，加载好后，如果DOM树还没构建好，则先等等DOM树解析好再执行；如果DOM树已经准备好，则立即执行。多个带defer属性的标签，按照顺序执行。
</code></pre>
<h6 id="2针对css使用css有三种方式使用linkimport内联样式其中link和import都是导入外部样式-他们之间的区别"><a class="markdownIt-Anchor" href="#2针对css使用css有三种方式使用linkimport内联样式其中link和import都是导入外部样式-他们之间的区别">#</a> (2) 针对 CSS: 使用 CSS 有三种方式：使用 link，@import，内联样式，其中 link 和 @import 都是导入外部样式。他们之间的区别:</h6>
<pre><code>    .link:浏览器会派发一个新等线程(HTTP线程)去加载资源文件，与此同时GUI渲染线程会继续向下渲染代码。
    .@import:GUI渲染线程会暂时停止渲染，去服务器加载资源文件，资源文件没有返回之前不会继续渲染（阻碍浏览器渲染）
    .style:GUI直接渲染
</code></pre>
<h6 id="注1外部样式如果长时间没有加载完毕浏览器为了用户体验会使用浏览器默认样式确保首次渲染的速度-所以css一般写在header中让浏览器尽快发送请求去获取css样式"><a class="markdownIt-Anchor" href="#注1外部样式如果长时间没有加载完毕浏览器为了用户体验会使用浏览器默认样式确保首次渲染的速度-所以css一般写在header中让浏览器尽快发送请求去获取css样式">#</a> 注 1：外部样式如果长时间没有加载完毕，浏览器为了用户体验，会使用浏览器默认样式，确保首次渲染的速度。所以 css 一般写在 header 中，让浏览器尽快发送请求去获取 css 样式。</h6>
<h6 id="注2在开发过程中导入外部样式使用link而不是import-如果css少尽量采用内嵌样式直接写在style标签中"><a class="markdownIt-Anchor" href="#注2在开发过程中导入外部样式使用link而不是import-如果css少尽量采用内嵌样式直接写在style标签中">#</a> 注 2：在开发过程中，导入外部样式使用 link，而不是 @import。如果 css 少，尽量采用内嵌样式，直接写在 style 标签中。</h6>
<h6 id="3针对dom树和cssom树"><a class="markdownIt-Anchor" href="#3针对dom树和cssom树">#</a> (3) 针对 DOM 树和 CSSOM 树：</h6>
<pre><code>   （1）HTML文件的代码层级尽量不要太深。
   （2）使用语义化的标签，来避免不标准语义化的特殊处理。
   （3）减少cssDOM代码的层级，因为选择器是从左向右进行解析的。      
</code></pre>
<h6 id="4减少回流与重绘"><a class="markdownIt-Anchor" href="#4减少回流与重绘">#</a> (4) 减少回流与重绘：</h6>
<p><img data-src="https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/WechatIMG81.png" alt="image"></p>
<pre><code>   （1）操作DOM时，尽量在低层级的DOM节点进行操作（避免频繁操作dom）。
   （2）不要使用table布局，一个小的改动可能会使整个table进行重新布局（避免频繁操作dom）。
   （3）使用css的表达式（避免频繁操作dom）。
   （4）不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式（避免频繁操作dom）。
   （5）使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素（避免频繁操作dom）。
   （6）避免频繁操作DOM，可以创建一个文档片段documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中（避免频繁操作dom）。
   （7）将元素先设置display:none，操作结束再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘（避免频繁操作dom）。
   （8）避免多次访问以下属性或方法:clientTop,clientLeft,clientWidth,clientHeight,offsetTop,offsetLeft,offsetWidth，offsetHeight,scrollTop,scrollLeft,scrollWidth,scrollHeight,getComputedStyle(),getBoundingCLientRect()（避免多次访问一下属性或方法）
   （9）使用绝对定位脱离文档流（复杂动画）
   （10）可以让transform，opacity，filters，will-change这些动画不会引起回流重绘。
</code></pre>
<h4 id="6浏览器本地存储"><a class="markdownIt-Anchor" href="#6浏览器本地存储">#</a> 6. 浏览器本地存储</h4>
<h5 id="61-浏览器本地存储方式及使用场景"><a class="markdownIt-Anchor" href="#61-浏览器本地存储方式及使用场景">#</a> 6.1. 浏览器本地存储方式及使用场景</h5>
<h6 id="1cookie"><a class="markdownIt-Anchor" href="#1cookie">#</a> （1）Cookie</h6>
<pre><code> 1.Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。Cookie的大小只有4kb，它是一种纯文本文件，每次发起HTTP请求都会携带Cookie.
</code></pre>
<p><strong>Cookie 的特性：</strong></p>
<ul>
<li>Cookie 一旦创建成功，名称就无法修改</li>
<li>Cookie 是无法跨域名的，也就是说 a 域名和 b 域名下的 cookie 是无法共享的，这也是由 Cookie 的隐私安全性决定的，这样就能够阻止非法获取其他网站的 Cookie</li>
<li>每个域名下 Cookie 的数量不能超过 20 个，每个 Cookie 的大小不能超过 4kb</li>
<li>有安全问题，如果 Cookie 被拦截了，那就可获得 session 的所有信息，即使加密也于事无补，无需知道 cookie 的意义，只要转发 cookie 就能达到目的</li>
<li>Cookie 在请求一个新的页面的时候都会被发送过去</li>
</ul>
<p><strong>如果需要域名之间跨域共享 Cookie，有两种方法：</strong></p>
<ul>
<li>1. 使用 Nginx 反向代理</li>
<li>2. 在一个站点登录之后，往其他网站写 Cookie。服务端的 Session 存储到一个节点，Cookie 存储 sessionid</li>
</ul>

      <div class="tags">
          <a href="/blog/tags/%E5%B0%91%E6%97%B6%E8%AF%B5%E8%AF%97%E4%B9%A6/" rel="tag"><i class="ic i-tag"></i> 少时诵诗书</a>
      </div>
  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2023-08-08 11:02:01" itemprop="dateModified" datetime="2023-08-08T11:02:01+08:00">2023-08-08</time>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>请我喝[茶]~(￣▽￣)~*</p>
  <div id="qr">
      
      <div>
        <img data-src="/blog/images/wechatpay.png" alt="宋胖子 微信支付">
        <p>微信支付</p>
      </div>
      
      <div>
        <img data-src="/blog/images/alipay.png" alt="宋胖子 支付宝">
        <p>支付宝</p>
      </div>
      
      <div>
        <img data-src="/blog/images/paypal.png" alt="宋胖子 贝宝">
        <p>贝宝</p>
      </div>
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>宋胖子 <i class="ic i-at"><em>@</em></i>宋胖子
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="https://song-ruipeng.gitee.io/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" title="计算机网络基础总结">https://song-ruipeng.gitee.io/blog/2023/04/18/一.计算机基础总结/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/blog/2022/08/20/%E4%B9%9D.Vue/" itemprop="url" rel="prev" data-background-image=" https:&#x2F;&#x2F;cancan-wx.oss-cn-hangzhou.aliyuncs.com&#x2F;bg&#x2F;6833939bly1gicm0fdw5cj20zk0m8hdt.jpg" title="vue总结">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> 我的日志</span>
  <h3>vue总结</h3>
  </a>

    </div>
    <div class="item right">
      

  <a href="/blog/2023/04/18/%E5%8D%81.HTTP/" itemprop="url" rel="next" data-background-image=" https:&#x2F;&#x2F;cancan-wx.oss-cn-hangzhou.aliyuncs.com&#x2F;bg&#x2F;6833939bly1giciuv0socj20zk0m8qes.jpg" title="HTTP总结">
  <span class="type">下一篇</span>
  <span class="category"><i class="ic i-flag"></i> 我的日志</span>
  <h3>HTTP总结</h3>
  </a>

    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80http"><span class="toc-number">1.</span> <span class="toc-text"> 一.HTTP</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AE%89%E5%85%A8"><span class="toc-number">1.1.</span> <span class="toc-text"> 1. 浏览器安全</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#11%E4%BB%80%E4%B9%88%E6%98%AFxss%E6%94%BB%E5%87%BB"><span class="toc-number">1.1.1.</span> <span class="toc-text"> 1.1 什么是 XSS 攻击？</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%AD%94"><span class="toc-number">1.1.1.1.</span> <span class="toc-text"> 答:</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95"><span class="toc-number">1.1.1.2.</span> <span class="toc-text"> 解决方法:</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12%E4%BB%80%E4%B9%88%E6%98%AFcsrf%E6%94%BB%E5%87%BB"><span class="toc-number">1.1.2.</span> <span class="toc-text"> 1.2 什么是 CSRF 攻击？</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%AD%94-2"><span class="toc-number">1.1.2.1.</span> <span class="toc-text"> 答:</span></a></li></ol></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#img"><span class="toc-number"></span> <span class="toc-text"> </span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95-2"><span class="toc-number">0.0.0.1.</span> <span class="toc-text"> 解决方法:</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2%E8%BF%9B%E7%A8%8B%E4%B8%8E%E7%BA%BF%E7%A8%8B%E7%95%A5"><span class="toc-number">0.1.</span> <span class="toc-text"> 2. 进程与线程 (略)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98"><span class="toc-number">0.2.</span> <span class="toc-text"> 3. 浏览器缓存</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#31%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6"><span class="toc-number">0.2.1.</span> <span class="toc-text"> 3.1 浏览器的缓存机制？</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%B3%A8"><span class="toc-number">0.2.1.1.</span> <span class="toc-text"> 注:</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BB%84%E6%88%90"><span class="toc-number">0.3.</span> <span class="toc-text"> 4. 浏览器组成</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86"><span class="toc-number">0.4.</span> <span class="toc-text"> 5. 浏览器渲染原理</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#51%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B"><span class="toc-number">0.4.1.</span> <span class="toc-text"> 5.1 浏览器的渲染过程？</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#52%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E4%BC%98%E5%8C%96"><span class="toc-number">0.4.2.</span> <span class="toc-text"> 5.2 浏览器渲染优化</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#1%E9%92%88%E5%AF%B9jsjs%E6%97%A2%E4%BC%9A%E9%98%BB%E5%A1%9Ehtml%E8%A7%A3%E6%9E%90%E4%B9%9F%E4%BC%9A%E9%98%BB%E5%A1%9Ecss%E7%9A%84%E8%A7%A3%E6%9E%90-%E5%9B%A0%E6%AD%A4%E6%88%91%E4%BB%AC%E5%8F%AF%E4%BB%A5%E5%AF%B9js%E7%9A%84%E5%8A%A0%E8%BD%BD%E6%96%B9%E5%BC%8F%E8%BF%9B%E8%A1%8C%E6%94%B9%E5%8F%98%E6%9D%A5%E8%BF%9B%E8%A1%8C%E4%BC%98%E5%8C%96"><span class="toc-number">0.4.2.1.</span> <span class="toc-text"> （1）针对 JS：JS 既会阻塞 HTML 解析，也会阻塞 CSS 的解析。因此我们可以对 JS 的加载方式进行改变，来进行优化:</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#2%E9%92%88%E5%AF%B9css%E4%BD%BF%E7%94%A8css%E6%9C%89%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F%E4%BD%BF%E7%94%A8linkimport%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F%E5%85%B6%E4%B8%ADlink%E5%92%8Cimport%E9%83%BD%E6%98%AF%E5%AF%BC%E5%85%A5%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F-%E4%BB%96%E4%BB%AC%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">0.4.2.2.</span> <span class="toc-text"> (2) 针对 CSS: 使用 CSS 有三种方式：使用 link，@import，内联样式，其中 link 和 @import 都是导入外部样式。他们之间的区别:</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%B3%A81%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E5%A6%82%E6%9E%9C%E9%95%BF%E6%97%B6%E9%97%B4%E6%B2%A1%E6%9C%89%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%AF%95%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%BA%E4%BA%86%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E4%BC%9A%E4%BD%BF%E7%94%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E9%BB%98%E8%AE%A4%E6%A0%B7%E5%BC%8F%E7%A1%AE%E4%BF%9D%E9%A6%96%E6%AC%A1%E6%B8%B2%E6%9F%93%E7%9A%84%E9%80%9F%E5%BA%A6-%E6%89%80%E4%BB%A5css%E4%B8%80%E8%88%AC%E5%86%99%E5%9C%A8header%E4%B8%AD%E8%AE%A9%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B0%BD%E5%BF%AB%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82%E5%8E%BB%E8%8E%B7%E5%8F%96css%E6%A0%B7%E5%BC%8F"><span class="toc-number">0.4.2.3.</span> <span class="toc-text"> 注 1：外部样式如果长时间没有加载完毕，浏览器为了用户体验，会使用浏览器默认样式，确保首次渲染的速度。所以 css 一般写在 header 中，让浏览器尽快发送请求去获取 css 样式。</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%B3%A82%E5%9C%A8%E5%BC%80%E5%8F%91%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%AF%BC%E5%85%A5%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E4%BD%BF%E7%94%A8link%E8%80%8C%E4%B8%8D%E6%98%AFimport-%E5%A6%82%E6%9E%9Ccss%E5%B0%91%E5%B0%BD%E9%87%8F%E9%87%87%E7%94%A8%E5%86%85%E5%B5%8C%E6%A0%B7%E5%BC%8F%E7%9B%B4%E6%8E%A5%E5%86%99%E5%9C%A8style%E6%A0%87%E7%AD%BE%E4%B8%AD"><span class="toc-number">0.4.2.4.</span> <span class="toc-text"> 注 2：在开发过程中，导入外部样式使用 link，而不是 @import。如果 css 少，尽量采用内嵌样式，直接写在 style 标签中。</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#3%E9%92%88%E5%AF%B9dom%E6%A0%91%E5%92%8Ccssom%E6%A0%91"><span class="toc-number">0.4.2.5.</span> <span class="toc-text"> (3) 针对 DOM 树和 CSSOM 树：</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#4%E5%87%8F%E5%B0%91%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98"><span class="toc-number">0.4.2.6.</span> <span class="toc-text"> (4) 减少回流与重绘：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8"><span class="toc-number">0.5.</span> <span class="toc-text"> 6. 浏览器本地存储</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#61-%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E6%96%B9%E5%BC%8F%E5%8F%8A%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">0.5.1.</span> <span class="toc-text"> 6.1. 浏览器本地存储方式及使用场景</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#1cookie"><span class="toc-number">0.5.1.1.</span> <span class="toc-text"> （1）Cookie</span></a></li></ol></li></ol></li></ol></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
        <ul>
          <li><a href="/blog/2022/08/20/%E4%B9%9D.Vue/" rel="bookmark" title="vue总结">vue总结</a></li><li><a href="/blog/2023/04/18/%E5%8D%81.HTTP/" rel="bookmark" title="HTTP总结">HTTP总结</a></li><li class="active"><a href="/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" rel="bookmark" title="计算机网络基础总结">计算机网络基础总结</a></li><li><a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" rel="bookmark" title="Event Loop">Event Loop</a></li><li><a href="/blog/2023/05/05/%E4%B8%89.Css/" rel="bookmark" title="CSS">CSS</a></li><li><a href="/blog/2023/05/17/%E5%9B%9B.JS/" rel="bookmark" title="JS">JS</a></li><li><a href="/blog/2023/06/12/%E4%BA%94.template/" rel="bookmark" title="Template">Template</a></li><li><a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" rel="bookmark" title="读源码理解Vnode">读源码理解Vnode</a></li><li><a href="/blog/2023/07/18/%E4%B8%83.React/" rel="bookmark" title="React">React</a></li><li><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" rel="bookmark" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></li><li><a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" rel="bookmark" title="React面试">React面试</a></li><li><a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" rel="bookmark" title="自测1">自测1</a></li><li><a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" rel="bookmark" title="Supense和异步组件解决首页白屏问题">Supense和异步组件解决首页白屏问题</a></li>
        </ul>
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="宋胖子"
      data-src="/blog/images/avatar.jpg">
  <p class="name" itemprop="name">宋胖子</p>
  <div class="description" itemprop="description">欢迎大家一起交流</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/blog/archives/">
        <span class="count">13</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/blog/categories/">
        <span class="count">1</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/blog/tags/">
        <span class="count">1</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/blog/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>


</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
        <a href="/blog/2022/08/20/%E4%B9%9D.Vue/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a>
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/blog/2023/04/18/%E5%8D%81.HTTP/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" title="React面试">React面试</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2022/08/20/%E4%B9%9D.Vue/" title="vue总结">vue总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/05/05/%E4%B8%89.Css/" title="CSS">CSS</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" title="Event Loop">Event Loop</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E5%8D%81.HTTP/" title="HTTP总结">HTTP总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" title="读源码理解Vnode">读源码理解Vnode</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/18/%E4%B8%83.React/" title="React">React</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" title="计算机网络基础总结">计算机网络基础总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" title="Supense和异步组件解决首页白屏问题">Supense和异步组件解决首页白屏问题</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2010 – 
    <span itemprop="copyrightYear">2023</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">宋胖子 @ Yume Shoka</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2023/04/18/一.计算机基础总结/',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/blog/js/app.js?v=0.2.5"></script>




</body>
</html>
